<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Crunchy Canvas</title>
<link href="tutor.css" title="Tutor Style" type="text/css" rel="stylesheet" />

<link href="tutor_bw.css" title="Black and white" type="text/css" rel="stylesheet" />


</head>
<body>
<div id="topbar">
<img alt="" src="croak.gif" class="titleimage"/>
<span class="title">Picasso's challenge</span>
</div>
<div id="navbar">
<span class="heading">Crunchy user tutorial</span>
<a href="welcome_en.html">Begin tutorial</a>
<a href="interpreter_en.html">Interpreter</a>
<a href="editor_en.html">Editor</a>
<a href="doctest_en.html">DocTest</a>
<a href="canvas_en.html">Graphics</a>
<a href="images_en.html">Image files</a>
<a href="external_en.html">External applications</a>
<span class="heading">Advanced Topics</span>
<a href="remote_en.html">Browsing</a>
<a href="config_en.html">Configuring Crunchy</a>
<a href="faq_en.html">FAQ, bugs, etc.</a>
<a href="writing_en.html">Writing tutorials</a>
<a href="/functional_tests">Tests</a>
</div>
<div id="main">
<h2 class="crunchy">Picturesque Crunchy</h2>
<div class="notes">
<h4>Mathematical graphics</h4>
<p> If you want graphics that have the origin at the bottom left corner, with increasing <i>y</i> coordinates going up, load up the 
<code title="py_code">math_graphics</code> module instead of the 
<code title="py_code">graphics</code> module.
</p>
</div>
<p>Using Crunchy, you can draw the most incredible pictures. 
 Try the following example; following the usual convention in computer graphics (but not in mathematics) the origin is at the top left corner.  
The drawing will take place when you press the appropriate button; it is left as a challenge for you to find it. [Note that this will only work if you use a
browser that supports the html <code>&lt;canvas&gt;</code> tag.]</p>

<pre title="editor">
import graphics
graphics.init_graphics(300, 300)
for i in range(50):
   for j in range(50):
       r = 255 - 5*i
       g = 255 - 5*j
       graphics.set_fill_color('rgb(%d, %d, 0)'%(r,g))
       graphics.filled_rectangle((j*6, i*6), 6, 6)
</pre>
<p>
Drawing only squares, however colorful, might be boring.  Instead, you could try the following; it includes essentially all the canvas graphics commands currently supported by Crunchy.  
</p>

<pre title="editor">
from graphics import *
init_graphics()

point(10, 10)
point(100, 10)
set_line_colour('red')  # Canadian/British spelling for "colour"
line((11, 10), (99, 10))

circle((100, 100), 50)
set_line_color('blue') # American spelling for "color"
circle((100, 100), 30)

set_line_colour('#ff0000') # red
triangle((200, 10), (240, 10), (220, 30))
set_fill_colour('#00ff00') # green
filled_triangle((200, 50), (240, 50), (220, 30))

filled_circle((100, 200), 50)
set_fill_colour('rgb(0, 0, 255)')  # blue
filled_circle((100, 200), 40)

width, height = 20, 10
rectangle((150, 10), width, height)
filled_rectangle((150, 25), width, height)

set_fill_color('red')
y = 300
filled_circle((100, y), 40)
for i in range(10):
    r = 255-i*5
    g = i*20
    b = i*20
    a = 0.5 - 0.04*i
    set_fill_colour('rgba(%s, %s, %s, %s)'%(r, g, b, a))
    x = 100 + 20*i
    r = 40 + 10*i
    filled_circle((x, y), r)
</pre>

<p>Rather than going straight to the next page, if you want, you can make a little detour and have a look at <a href="named_colours_en.html">valid colour names</a> used in Crunchy.</p>

<h3 class="crunchy">Using the interpreter</h3>
<p>You can also create graphics using the interpreter.  Try the following:</p>
<pre title="interpreter">
&gt;&gt;&gt; import graphics as g
&gt;&gt;&gt; g.init_graphics()
&gt;&gt;&gt; g.line((100, 100), (200, 200))
</pre>

<h3 class="crunchy">Advanced stuff</h3>
<p>The new "comet-based" Crunchy has not only static graphics capabilities but 
also supports simple animations.  However, sometimes the animation may seem to 
stall.  In this example, we use the <code title="py_code">math_graphics</code>
module instead of the <code title="py_code">graphics</code> module, which 
means that the origin is at the bottom left corner.</p>

<pre title="editor">
from math_graphics import  *
init_graphics()
import time
for i in range(40):
    set_fill_colour("black")
    filled_rectangle((0, 0), 400, 400)
    set_fill_colour("yellow")
    filled_rectangle((10*i, 10*i), 50, 50)
    time.sleep(0.1)
</pre>
<h3 class="crunchy">Graphics reference</h3>
<p>The following table is a summary of available graphics commands.</p>
<table summary="Available graphics commands" class='summary'>
<tr><th colspan='2'>Available graphics commands</th></tr>
<tr>
<td><code>point(x, y)</code></td><td>Draws a point in the default line colour.</td>
</tr>
<tr>
<td><code>circle((x, y), r)</code></td><td>Draws a circle of radius <code>r</code> centred on <code>(x, y)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>line((x1, y1), (x2, y2))</code></td><td>Draws a line from point <code>(x1, y1)</code> to point <code>(x2, y2)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>rectangle((top, left), width, height)</code></td><td>Draws a rectangle in the default line colour.</td>
</tr>
<tr>
<td><code>triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a triangle joining the three points in the default line colour.</td>
</tr>
<tr>
<td><code>filled_circle((x, y), r)</code></td><td>Draws a filled circle of radius r centred on <code>(x, y)</code> in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_rectangle((top, left), width, height)</code></td><td>Draws a filled rectangle in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a filled triangle joining the three points in the default fill colour.</td>
</tr>
<tr>
<td><code>set_line_color(color)</code> <em>or</em><br/>
<code>set_line_colour(colour)</code>
</td><td>Sets the default line colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
<tr>
<td><code>set_fill_color(color)</code>
<em>or</em><br/>
<code>set_fill_colour(colour)</code>
</td><td>Sets the default fill colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
</table>

<br />

<table summary="valid colours" class='summary'>
<tr><th colspan='2'>Valid colours</th></tr>
<tr><td><a href="named_colours_en.html">'named colour'</a></td><td>HTML colour name.</td></tr>
<tr><td>'hex value'</td><td>Colours are defined using a hexadecimal notation for the combination of Red, Green, and Blue colour values (RGB). The lowest value that can be given to one basic colour is 0 (hex #00). The highest value is 255 (hex #FF or #ff; both upper and lower case letters are accepted).  See <a href="named_colours_en.html">named colours</a> for examples. </td></tr>
<tr><td>'rgb(<em>red, green, blue</em>)'</td><td>Colours are defined using a decimal notation for the combination of Red, Green, and Blue colorr values (RGB). The lowest value that can be given to any one of the basic colour (<em>red</em>, <em>green</em>, or <em>blue</em>) is 0. The highest value is 255. </td></tr>
<tr><td>'rgba(<em>red, green, blue, alpha</em>)'</td><td>Similar to rgb(<em>red</em>, <em>green</em>, or <em>blue</em>), but with the addition of a transparency parameter (<em>alpha</em>). The valid range of values is from 0.0 (fully transparent) to 1.0 (fully opaque). By default, this property is set to 1.0 (fully opaque). </td></tr>
</table>
<h3 class="crunchy">Advanced stuff, for tutorial writers</h3>
<p>Surprise, there is nothing special to do.  Every interactive object (interpreter and editor) can use the graphics.</p>
</div>
</body>
</html>